<template>
    <Echarts ref="mapp" :option="option" width="100%" height="100%" :initAfter="initAfter"/>
</template>
  
<style lang="scss" scoped></style>
<script setup lang="ts">
import { reactive,onMounted ,onUnmounted,watch} from 'vue'
import Echarts from '../../../components/echarts/index.vue'
import 'echarts/extension/bmap/bmap'
import { area } from '@/api/swimming/plan/index';

let intervalId=ref<number>()
const mapp=ref()
let option = reactive({})
let imgs: Array<string> = []

onMounted(()=>{
    getList()
    intervalId.value=setInterval(
        ()=>{
            getList()
        },40000
    )
})

onUnmounted(()=>{
    clearInterval(intervalId.value)
})

const initOption = (data: Array<{ name: string; value: number[]; }>) => {
    option = {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: "rgba(0,0,0,.6)",
            textStyle: {
                color: "#FFF",
            },
            formatter:function(params:any){
                let result=params.name+'<br/>'
                result+='<div class="imgd"><img class="img" src="' + params.data.img + '" /></div></div>'
                // result+='<img class="img" src="' + params.data.img + '" />'
                return result
            }
        },
        bmap: {
            center: [120.702621, 28.150891],
            zoom: 12,
            roam: true,
            titlt: 50
        },
        series: [
            {
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: data,
                symbolSize: function (val: number[]) {
                    return 20;
                },
                encode: {
                    value: 2
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: data,
                symbolSize: function (val: number[]) {
                    return 20;
                },
                encode: {
                    value: 2
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                itemStyle: {
                    color: "red",
                    shadowBlur: 10,
                    shadowColor: 'red'
                },
                emphasis: {
                    scale: true
                },
                zlevel: 1
            }
        ]
    }
    mapp.value.setData(option);
}

const initAfter = (chart: {
    getModel: () => {
        (): any
        new(): any
        getComponent: { (arg0: string): { (): any; new(): any; getBMap: { (): any; new(): any } }; new(): any }
    }
}) => {
    // 添加百度地图插件
    var bmap = chart.getModel().getComponent('bmap').getBMap()
    bmap.setMapStyleV2({
        styleId: '7cb8408f7fc0bbba8f992b8242a25f98'
    })
    bmap.addEventListener('mousewheel', function (e:WheelEvent) {
        e.preventDefault();
    });
    
    let opts = {
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    };

    // bmap.addControl(new BMap.MapTypeControl())
    bmap.addControl(new BMap.NavigationControl(opts))
}

const getList=async ()=>{
    var res=await area();
    var dat: Array<{ name : string; value:number[]; img:string}> = [];
    imgs=res.data['imgs']
    let names:Array<string>=res.data['names'];
    let numbers:Array<number[]>=res.data['numbers']
    
    for(let i=0;i<names.length;i++){
        dat.push({
            name:names[i],
            value:numbers[i],
            img:imgs[i]
        })
    }

    
    // for(const[key,value] of Object.entries(res.data)){
    //     const number=value as number[]
    //     dat.push({
    //         name:key,
    //         value:number
    //     })
    // }
    initOption(dat)
}
</script>

<style type="text/css">
    .anchorBL{
        display:none
    }
    .img{
        width: 100%;
        height: 100%;
    }
    .imgd{
        width: 250px;
        /* width: 20%; */
        height: 200px;
        /* height: 50%; */
        object-fit: contain;
    }
</style>